<template>
    <div id="ordercommit">
           <div id='header6'>
      <div class='back'>
        <router-link :to="'/detail/'+$route.params.id">
          <i class='iconfont'>&#xe640;</i>
        </router-link>
      </div>
      
      <div class="title"><router-link to="/Order">提交订单</router-link></div>
      
    </div>
   
     <div class='contents'>
      
      <div class="content-title">{{commits.title}} </div>
      <div class='deal-content'>
        
        <div class='content-info-line'>
          
          <span class='text'>单价：</span>
          <span class='price' >
            <span id='singlePri'>{{commits.price}}</span>
            元
          </span>
        </div>
        <div class='content-info-line'>
          
          <span class='text'>数量：</span>
          <div class='operate'>
            
            <div  class='delete' id="delBtn">
              <i class='iconfont'>&#xe631;</i>
            </div>
            <input type="text" value='1' class='number' id='numInput'/>
            <div  class='add' id='addBtn'>
              <i class='iconfont'>&#xe60d;</i>
            </div>
          </div>
        </div>
        <div class='content-info-line'>
          
          <span class='text'>总价：</span>
          <span class='amount'>
            <span id='total'>9.5</span>
            元
          </span>
        </div>
      </div>
      <div class="content-title">
        免登录直接购买
      </div>
      <div class='login-wrapper'>
        
        <div class='content-info-line'>
          
          <input type='text' placeholder="请输入手机号" class='tel'/>
          <button type="button" class='send'>发送验证码</button>
        </div>
        <div class='content-info-line'>
          
          <input type='text' placeholder="请输入手机短信中的验证码" class='yzm'/>
          
        </div>
      </div>
      
      <div class='btn-wrapper'>
        <div class='commits'>
          提交订单
        </div>
      </div>
      <div class='quick-login'>
        已有美团账号也可以去
        <router-link to="/Login" class='login'>登录</router-link>
      </div>
    </div>
    
  
    <div class="footer">
      <div class="footer-bar">
        <router-link to="/Login" class="login1">登录</router-link>
        <router-link to="/Register1" class="register1">注册</router-link>
        <div class="city">
          <span>城市：</span>
          <a href="#" class="sz">深圳</a>
        </div>
      </div>
      <div class="footer-nav">
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">订单</a></li>
          <li><a href="#">客户端</a></li>
          <li><a href="#">电脑版</a></li>
          <li><a href="#">帮助</a></li>
        </ul>
      </div>
      <div class="footer-router-links">
        <span>友情链接:</span>
        <a href="#">猫眼电影</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span>
          ©2017 美团网 
          <a href="#">京ICP证070791号</a>
        </span>
      </div>
    </div>
    </div>
</template>

<script>

//引入jQuery
   import $ from 'jquery';

    export default {
      name: 'ordercommit',
        data(){
            return{
               commits:""
            }
        },
        methods:{
             reqData(id){
                var that=this;
                var url="http://127.0.0.1:2000/api/productcontent?id="+id;
                this.$http.get(url).then(function(res){
                    that.commits=res.body.result[0];
                },function(err){
                    console.log(err);
                })
            }
        },
        computed:{

        },
         mounted(){
            var that=this;
            this.reqData(this.$route.params.id);
            var deleteNode = document.getElementById('delBtn');
			      	var numNode  = document.getElementById('numInput');
			      	
			      	var addNode = document.getElementById('addBtn');
			      	
			      	var total = document.getElementById('total'); 
			      	
			      	var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			      	
			      	
			       deleteNode.onclick = function(){
			       		
			       		var num = parseInt(numNode.value);
			       		
			       		if(num == 1){
			       			numNode.value = 1;
			       			
			       		}else {
			       			numNode.value = num  - 1;
			       		}
			       		
			       		if(num <=2 ){
			       			
			       			deleteNode.className = 'delete'
			       			
			       			
			       		}else{
			       			
			       			deleteNode.className = 'delete minus'
			       		}
			       		
						var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			       		
			       }
			       
			       addNode.onclick = function(){
			       	
			       		var num = parseInt(numNode.value) + 1;
			       		numNode.value = num;
			       		
			       		if(num >= 2){
			       			
			       			deleteNode.className = 'delete minus'
			       		}else{
			       			
			       			deleteNode.className = 'delete'
			       		}
			       		
			       		var singlePri = parseFloat(document.getElementById('singlePri').innerHTML); 
			      	
			      	total.innerHTML = singlePri * parseInt(numNode.value);
			       		
			       }

             $(".tel").val(JSON.parse(sessionStorage.getItem("user_info")).tel);

             $(".commits").click(function(){
               var product_id=that.$route.params.id;
               var user_id=JSON.parse(sessionStorage.getItem("user_info"))._id;
               var price=that.commits.price;
               var count=$(".number").val();
               var all_price=price*count;
               var url="http://127.0.0.1:2000/api/order";
                that.$http.post(url,{product_id:product_id,user_id:user_id,price:price,count:count,all_price:all_price}).then(function(res){
                  if(res.body.success==1){
                    alert(res.body.msg);
                    that.$router.push({path:'/order'});
                  }
                },function(err){
                  console.log(err);
                })
             })
        }
    }
</script>